@deep: ~'>>>';

.content-bottom-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .img {
    width: 100%;
    height: 100%;
  }
  .point-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;

    .actived {
      z-index: 8;
    }
  }

  .point-item {
    position: absolute;
    margin-left: -5px;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0035f9;
    z-index: 7;
    cursor: pointer;

    .type-text {
      position: absolute;
      left: -3px;
      top: -15px;
      width: 14px;
      text-align: center;
      color: #d12159;
      background: #f5f5f5;
      line-height: 1;
      font-size: 12px;
    }
  }
  .active,
  .selected {
    background: #d12159;
    box-shadow: 0 0 1px 3px #d12159;
  }
  .point-line-wrap {
    .point-wrap;
  }
  .rang-point-wrap {
    .point-wrap;

    .range-point-item {
      position: absolute;
      margin-left: -5px;
      margin-top: -5px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #d12159;
      box-shadow: 0 0 1px 3px #d12159;
      z-index: 7;
    }
  }
}